<template>
    <div class="app-container">
      <!-- 搜索条件 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="AppName" prop="appName">
                <el-input v-model="queryParams.appName" placeholder="请输入AppName" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="名称" prop="title">
                <el-input v-model="queryParams.title" placeholder="名称" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" icon="el-icon-plus" size="small" @click="handleAdd"
                    v-hasPermi="['xxl-job:group:add']">新增</el-button>
            </el-form-item>
      </el-form>
  
      <!--select控制一个页面展示多少条-->
    <div>每页
      <el-select v-model="queryParams.pageSize" style="width: 80px" @change="handleSizeChange">
        <el-option label="10" value="10"></el-option>
        <el-option label="20" value="20"></el-option>
        <el-option label="30" value="30"></el-option>
        <el-option label="50" value="50"></el-option>
        <el-option label="100" value="100"></el-option>
      </el-select>
      条记录
    </div>
  
    <!-- 表格数据 -->
      <el-table v-loading="loading" :data="grouplist">
        <!-- <el-table-column label="执行器编号" align="center" prop="id" /> -->
        <el-table-column label="AppName" align="center" prop="appName" />
        <el-table-column label="名称" align="center" prop="title" />
        <el-table-column label="注册方式" align="center" prop="addressType" :formatter="registformat">
        </el-table-column>
        <el-table-column label="OnLine机器地址" align="center" prop="addressList">
          <template slot-scope="scope" >
          <span v-if="machineFormat(scope.row)">无</span>
          <span v-else>
        <el-link type="primary" :underline="false"  @click="stateFormat(scope.row)" >查看({{ machinecount[scope.row.id] }})</el-link>
         </span>
      </template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-dropdown trigger="click" size="small" @command="(command) => { handleCommand(command, scope.row) }">
            <el-button class="oper" size="small">操作<i class="el-icon-caret-bottom"></i></el-button>  
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="edit"
                        v-hasPermi="['xxl-job:group:edit']">编辑</el-dropdown-item>
                      <el-dropdown-item command="del"
                        v-hasPermi="['xxl-job:group:remove']">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
    </template>
        </el-table-column>
      </el-table>
  
      <!--下面展示总共条数和切换页面-->
    <el-pagination background layout="total,->,prev, pager, next" v-show="total > 0" :total="total"
      :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" prev-text="上页" next-text="下页"
      @pagination="getList" @current-change="handleCurrentChange" />

      <!-- 查看对话框 -->
      <el-dialog :title="title" :visible.sync="check" width="20%">
            <div class="cell">{{ machine }}</div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="check = false">确 定</el-button>
          </span>
        </el-dialog>
  
      <!-- 添加或修改对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
             <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="AppName" prop="appName">
                    <el-input v-model="form.appName" placeholder="请输入AppName" />
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入执行器名称" />
                </el-form-item>
                <el-form-item label="注册方式" prop="addressType">
                    <el-radio-group v-model="form.addressType">
                    <el-radio :label="0" @change="changeregist">自动注册</el-radio>
                    <el-radio :label="1" @change="changeregist">手动录入</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="机器地址" prop="addressList">
                    <el-input type="textarea" rows="4" v-model="form.addressList" :disabled="regist" placeholder="请输入执行器地址列表,多地址以英文逗号分隔"></el-input>
                </el-form-item>
            </el-form> 
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { listGroup,getGroup,addGroup,updateGroup,delGroup} from "@/api/xxl-job/group";
  
  export default {
    name: "Group",
    data() {
      return {
        //注册结点数量
        machinecount:[],
        //注册结点/机器地址
        machine:'',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 表格数据
        grouplist: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        check:false,
        //注册方式是否为自动
        regist:true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id:null,
          appName: null,
          title: null,
          addressType:0,
          addressList:null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules:{
                appName: [
                  { required: true, message: "AppName不能为空", trigger: "blur" },
                  { min: 4, max: 64, message: 'AppName长度限制为4~64', trigger: 'blur' },
                  {pattern:/^[a-z][0-9]|-|[a-z]$/,message:'限制以小写字母开头,由小写字母、数字和中划线组成'}
                ],
                title: [
                  { required: true, message: "执行器名称不能为空", trigger: "blur" },
                  { min: 4, max: 12, message: '名称长度限制为4~12', trigger: 'blur' }
                ], 
                addressType:[
                { required: true, message: "请选择注册方式", trigger: "change" },
                ]
            }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      //计算注册结点数量
      machineFormat(row){
      if(row.addressList==''||row.addressList==null){
        return true
      }
      else{
        this.machinecount[row.id]=1
      for(let i=0;i<row.addressList.length;i++){
        if(row.addressList[i]==',')this.machinecount[row.id]++
      }
      return false
      }
      
    },
      //注册方式显示
      registformat(row){
        if(row.addressType==0){
          return '自动注册'
        }
        else if(row.addressType==1){
          return '手动录入'
        }
      },
      //查看注册结点
      stateFormat(row){
        this.machine= row.addressList.split(',').join('\n')
        this.check=true;
        this.title="注册结点";
        return this.machine
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        listGroup(this.queryParams).then(response => {
          this.grouplist = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id:null,
          appName: null,
          title: null,
          addressType:0,
          addressList:null,
        };
        this.resetForm("form");
      },
      /**页面改变变化 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    /**修改当前页所触发的函数*/
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
      // 修改+删除
      handleCommand(command, row) {
            if(command=="edit"){
              this.reset();
                const Id = row.id || this.ids
                getGroup(Id).then(response => {
                  this.form = response.data;
                  this.open = true;
                  this.title = "修改执行器";
                  this.changeregist();
        });
            }
            else if(command=="del"){
              const ids = row.id || this.ids;
                this.$modal.confirm('确定删除执行器？').then(function() {
                  return delGroup(ids);
                }).then(() => {
                  this.getList();
                  this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            }
        },
        // 查看注册结点
        handleCheck(){
          this.check=true;
          this.title="注册结点";
        },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "新增执行器";
        this.changeregist();
      },
      //选择注册方式
      changeregist:function(){
            if(this.form.addressType==0){
                this.regist=true
            }
            else if(this.form.addressType==1){
                this.regist=false
            }
        },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateGroup(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addGroup(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
    }
  };
  </script>

<style>
/* 操作按钮样式保持不变 */
.oper,
.oper:hover,
.oper:focus{
    color: white;
    background-color: rgb(60,141,188);
}
/* 注册结点换行显示 */
.cell{
  white-space: pre-wrap !important;
}
</style>